<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElTimeSelect } from 'element-plus';
import 'element-plus/dist/index.css';
import dayjs from 'dayjs';
import * as XLSX from 'xlsx';
import { useFormRules } from '@/hooks/common/form';
import {
  exportHistoryExcelData,
  fetchDeviceList,
  getDeviceDetailApi,
  getHistoryData4CurveApi,
  switchDevice,
  updateAnalogDevice,
  updateDDTTC,
  updateDDThrSC,
  updateDDTimeSC,
  updateDigitalDevice
} from '@/service/api/businessApi';
import { useEcharts } from '@/hooks/common/echarts';
import { useProjectStore } from '@/store/modules/project';

const projectStore = useProjectStore();

let model: any = reactive({});
const { defaultRequiredRule } = useFormRules();
const rules: any = {
  deviceNo: defaultRequiredRule
};

interface Emits {
  (e: 'submitted'): void;
}

const emit = defineEmits<Emits>();

const hostData = defineModel<any>('hostData', { required: true });
const farmData = defineModel<any>('farmData', { required: true });

const disabled = defineModel<any>('disabled', { required: false });

const chartDataRange: any = ref([dayjs(), dayjs()]);
const rangePresets = ref([
  { label: '最近一周', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '最近一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '最近三个月', value: [dayjs().add(-90, 'd'), dayjs()] }
]);

const minute = ref(0);
const seconds = ref(0);

const getDetail = async (id: any) => {
  const res = await getDeviceDetailApi(id);
  if (res.error === null) {
    if (res.data.deviceType === 1) {
      Object.assign(model, res.data);
      getChartData(id);
    } else {
      deviceInit(res.data);
      getControlDevice();
    }
  }
};

// eslint-disable-next-line complexity
const deviceInit = (val: any, hostName1?: any) => {
  Object.assign(model, {
    id: val.id,
    isAllowSameTime: val.isAllowSameTime || false,
    deviceNo: val.deviceNo,
    deviceName: val.deviceName,
    farmId: val.farmId,
    deviceType: val.deviceType,
    categoryCode: val.categoryCode,
    categoryName: val.categoryName,
    location: val.location,
    remark: val.remark,
    status: val.status,
    hostId: val.hostId,
    hostNo: val.hostNo,
    hostName: val.hostName,
    hostName1: hostName1 || '',
    collectionName: val.collectionName,
    channel: val.channel,
    period: val.period,
    timer1Start: val.timer1Start || '',
    timer1End: val.timer1End || '',
    timer2Start: val.timer2Start || '',
    timer2End: val.timer2End || '',
    timer3Start: val.timer3Start || '',
    timer3End: val.timer3End || '',
    timer4Start: val.timer4Start || '',
    timer4End: val.timer4End || '',
    timer5Start: val.timer5Start || '',
    timer5End: val.timer5End || '',
    timer6Start: val.timer6Start || '',
    timer6End: val.timer6End || '',
    timer7Start: val.timer7Start || '',
    timer7End: val.timer7End || '',
    timer8Start: val.timer8Start || '',
    timer8End: val.timer8End || '',
    timer1Enable: val.timer1Enable,
    timer2Enable: val.timer2Enable,
    timer3Enable: val.timer3Enable,
    timer4Enable: val.timer4Enable,
    timer5Enable: val.timer5Enable,
    timer6Enable: val.timer6Enable,
    timer7Enable: val.timer7Enable,
    timer8Enable: val.timer8Enable,
    field: val.field,
    unit: val.unit,
    lowAlarm: val.lowAlarm || '',
    hiAlarm: val.hiAlarm || '',
    controlMode: val.controlMode,
    autoControlMode: val.autoControlMode,
    sensorDeviceId: val.sensorDeviceId,
    sensorDeviceName: val.sensorDeviceName || '',
    lowValueTrigger: val.lowValueTrigger || '',
    highValueTrigger: val.highValueTrigger || '',
    highValueTriggerSwitch: val.highValueTriggerSwitch,
    lowValueTriggerSwitch: val.lowValueTriggerSwitch,
    lowValueTriggerEnable: val.lowValueTriggerEnable,
    highValueTriggerEnable: val.highValueTriggerEnable,
    cmd: val.cmd || '',
    isShow: val.isShow === undefined ? true : val.isShow
  });
};

function getControlDevice() {
  if (model.autoControlMode === 3) {
    model.isAllowSameTime = true;
  }
  if ((model.autoControlMode === 3 || model.autoControlMode === 2) && model.sensorDeviceId) {
    getDeviceDetailApi(model.sensorDeviceId).then((res: any) => {
      if (res.error === null) {
        model.hostName1 = res.data.hostName || '';
        model.hostNo1 = res.data.hostNo || '';
        model.sensorDeviceName = res.data.deviceName || '';
        getDeviceList(res.data.hostNo);
        model.autoControlMode = 2;
      }
    });
  }
}

const { domRef, updateOptions, showLoading, hideLoading } = useEcharts(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['传感器值']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [] as string[]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      color: '#8e9dff',
      name: '传感器值',
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#8e9dff'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [] as number[]
    }
  ],
  dataZoom: [
    {
      type: 'slider',
      start: 0,
      end: 100
    }
  ]
}));

const getChartData = async (id: any) => {
  showLoading();
  const res = await getHistoryData4CurveApi({
    deviceId: id,
    startTime: dayjs(chartDataRange.value[0].startOf('day')).valueOf(),
    endTime: chartDataRange.value[1].valueOf()
  });
  if (res.error === null) {
    hideLoading();
    updateOptions(opts => {
      opts.xAxis.data = res.data.map((n: any) => n.time);
      opts.series[0].data = res.data.map((n: any) => n.average);
      return opts;
    });
  }
};

const visible = ref(false);
const deviceId = ref();
const setRowData = (data: any) => {
  visible.value = true;
  deviceId.value = data.id;
  getDetail(data.id);
};

const nodeNoChange = (val: any) => {
  const data = hostData.value.find((item: any) => item.hostNo === val);
  model.hostId = data.id;
  model.collectionName = data.collectionName;
};

const modalClose = () => {
  visible.value = false;
  model = reactive({});
  updateOptions(opts => {
    opts.xAxis.data = [];
    opts.series[0].data = [];
    return opts;
  });
};

function analyzeDeviceList(val: any) {
  deviceIdList.value.push({
    label: val.deviceName,
    deviceNo: val.deviceNo,
    id: val.id,
    value: val.deviceName
  });
}

const deviceIdList: any = ref([]);

function getDeviceList(nodeNo: any) {
  if (deviceIdList.value.length === 0) {
    fetchDeviceList(`&hostNo=${nodeNo}&deviceType=1`, 1, 10000, projectStore.currentProject?.id).then((res: any) => {
      if (res.error === null) {
        res.data.data.forEach((val: any) => {
          if (val.categoryCode === 1000 && val.childDeviceInfo !== null && val.childDeviceInfo.length > 0) {
            val.childDeviceInfo.forEach((item: any) => {
              analyzeDeviceList(item);
            });
          } else {
            analyzeDeviceList(val);
          }
        });
      }
    });
  }
}

const changeCgHost = (val: any) => {
  hostData.value.forEach((value: any) => {
    if (value.hostNo === val) {
      model.sensorDeviceName = '';
      deviceIdList.value = [];
      getDeviceList(value.hostNo);
    }
  });
};

const changeDevice = (val: any) => {
  deviceIdList.value.forEach((value: any) => {
    if (value.label === val) {
      model.sensorDeviceId = value.id;
      model.sensorDeviceName = value.value;
    }
  });
};

defineExpose({
  setRowData
});
const handleOk = (needClose = true) => {
  if (model.deviceType === 1) {
    const param = {
      id: model.id,
      deviceNo: model.deviceNo,
      deviceName: model.deviceName,
      deviceType: model.deviceType,
      categoryCode: model.categoryCode,
      isShow: model.isShow,
      farmId: model.farmId,
      remark: model.remark,
      hostId: model.hostId,
      channel: model.channel,
      period: model.period,
      field: model.field,
      unit: model.unit,
      lowAlarm: model.lowAlarm,
      hiAlarm: model.hiAlarm,
      command: model.cmd,
    };
    updateAnalogDevice(param).then((res: any) => {
      if (res.data) {
        window.$message?.success('更新设备（传感器）成功！');
        if (!needClose) return;
        modalClose();
        emit('submitted');
      } else {
        window.$message?.error(res.message || '更新设备（传感器）错误');
      }
    });
  } else {
    const param = {
      id: model.id,
      deviceNo: model.deviceNo,
      deviceName: model.deviceName,
      deviceType: model.deviceType,
      categoryCode: model.categoryCode,
      isShow: model.isShow,
      farmId: model.farmId,
      remark: model.remark,
      status: model.status,
      hostId: model.hostId,
      channel: model.channel
    };
    updateDigitalDevice(param).then((res: any) => {
      if (res.data) {
        window.$message?.success('更新设备（控制器）成功！');
        if (!needClose) return;
        modalClose();
        emit('submitted');
      } else {
        window.$message?.error(res.message || '更新设备（控制器）错误');
      }
    });
  }
};

const deleteEmptyObject = (obj: any) => {
  for (const i in obj) {
    if (obj[i] === '') {
      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
      delete obj[i];
    }
  }
  return obj;
};
const handleKZOk = () => {
  if (model.isAllowSameTime) {
    // 同时开的情况
    const param = {
      id: model.id,
      deviceType: model.deviceType,
      controlMode: 2,
      autoControlMode: 3,
      sensorDeviceId: model.sensorDeviceId,
      lowValueTrigger: model.lowValueTrigger,
      highValueTrigger: model.highValueTrigger,
      highValueTriggerSwitch: model.highValueTriggerSwitch,
      lowValueTriggerSwitch: model.lowValueTriggerSwitch,
      lowValueTriggerEnable: model.lowValueTriggerEnable,
      highValueTriggerEnable: model.highValueTriggerEnable,
      timer1Start: model.timer1Start,
      timer1End: model.timer1End,
      timer2Start: model.timer2Start,
      timer2End: model.timer2End,
      timer3Start: model.timer3Start,
      timer3End: model.timer3End,
      timer4Start: model.timer4Start,
      timer4End: model.timer4End,
      timer5Start: model.timer5Start,
      timer5End: model.timer5End,
      timer6Start: model.timer6Start,
      timer6End: model.timer6End,
      timer7Start: model.timer7Start,
      timer7End: model.timer7End,
      timer8Start: model.timer8Start,
      timer8End: model.timer8End,
      timer1Enable: model.timer1Enable,
      timer2Enable: model.timer2Enable,
      timer3Enable: model.timer3Enable,
      timer4Enable: model.timer4Enable,
      timer5Enable: model.timer5Enable,
      timer6Enable: model.timer6Enable,
      timer7Enable: model.timer7Enable,
      timer8Enable: model.timer8Enable
    };
    updateDDTTC(deleteEmptyObject(param)).then((res: any) => {
      if (res.error === null) {
        window.$message?.success('更新控制器配置成功！');
      }
    });
    return;
  }
  if (model.controlMode === 2 && model.autoControlMode === 1) {
    const param = {
      id: model.id,
      deviceType: model.deviceType,
      controlMode: model.controlMode,
      autoControlMode: model.autoControlMode,
      timer1Start: model.timer1Start,
      timer1End: model.timer1End,
      timer2Start: model.timer2Start,
      timer2End: model.timer2End,
      timer3Start: model.timer3Start,
      timer3End: model.timer3End,
      timer4Start: model.timer4Start,
      timer4End: model.timer4End,
      timer5Start: model.timer5Start,
      timer5End: model.timer5End,
      timer6Start: model.timer6Start,
      timer6End: model.timer6End,
      timer7Start: model.timer7Start,
      timer7End: model.timer7End,
      timer8Start: model.timer8Start,
      timer8End: model.timer8End,
      timer1Enable: model.timer1Enable,
      timer2Enable: model.timer2Enable,
      timer3Enable: model.timer3Enable,
      timer4Enable: model.timer4Enable,
      timer5Enable: model.timer5Enable,
      timer6Enable: model.timer6Enable,
      timer7Enable: model.timer7Enable,
      timer8Enable: model.timer8Enable
    };
    updateDDTimeSC(deleteEmptyObject(param)).then((res: any) => {
      if (res.error === null) {
        window.$message?.success('更新控制器时间表自动控制配置成功！');
      }
    });
  } else {
    const param = {
      id: model.id,
      deviceType: model.deviceType,
      controlMode: model.controlMode,
      sensorDeviceId: model.sensorDeviceId,
      autoControlMode: model.autoControlMode,
      lowValueTrigger: model.lowValueTrigger,
      highValueTrigger: model.highValueTrigger,
      highValueTriggerSwitch: model.highValueTriggerSwitch,
      lowValueTriggerSwitch: model.lowValueTriggerSwitch,
      lowValueTriggerEnable: model.lowValueTriggerEnable,
      highValueTriggerEnable: model.highValueTriggerEnable
    };
    updateDDThrSC(param).then((res: any) => {
      if (res.error === null) {
        window.$message?.success('更新控制器上下限自动控制配置成功！');
      }
    });
  }
};

const saveSwitchDevice = (type: number) => {
  if (type === 1) {
    const param = {
      id: model.id,
      status: model.status,
      controlMode: model.controlMode
    };
    switchDevice(param).then(res => {
      if (res.error === null) {
        window.$message?.success(
          model.deviceType === 1 ? '设备（传感器）更新状态成功！' : '设备（控制器）更新状态成功！'
        );
      }
    });
  }
  if (type === 2) {
    if (minute.value === 0 && seconds.value === 0) {
      window.$message?.error('请输入投料时长');
      return;
    }
    const param = {
      id: model.id,
      controlMode: 0,
      secs: minute.value * 60 + seconds.value,
      status: true
    };
    switchDevice(param).then(res => {
      if (res.error === null) {
        window.$message?.success('开始投料成功');
      }
    });
  }
};

/* excel 导出逻辑 */
const exportExcelLoading = ref(false);
const exportExcel = () => {
  exportExcelLoading.value = true;
  exportHistoryExcelData({
    pageNo: 1,
    pageSize: 10000,
    deviceId: deviceId.value,
    startTime: dayjs(chartDataRange.value[0].startOf('day')).valueOf(),
    endTime: chartDataRange.value[1].valueOf()
  }).then((res: any) => {
    const data = res.data;
    if (data.length > 0) {
      // 创建工作表
      const dataWithChineseKeys = data.map((item: any) => ({
        时间: item.time,
        数据: item.average
      }));
      const ws = XLSX.utils.json_to_sheet(dataWithChineseKeys);
      // 设置列宽（单位：字符宽度）
      ws['!cols'] = [{ wch: 25 }, { wch: 10 }];
      // 创建工作簿并添加工作表
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      // 导出Excel文件
      XLSX.writeFile(wb, '数据导出.xlsx');
      exportExcelLoading.value = false;
    } else {
      window.$message?.error('暂无数据');
      exportExcelLoading.value = false;
    }
  });
};
/* excel */

/* region ====== 曲线时间change start */
const dateIsChange = ref(false);
const dateStateChange = () => {
  dateIsChange.value = true;
};
const dateRangeChange = (isOpen: boolean) => {
  // 窗口关闭并且数据有改变
  if (!isOpen && dateIsChange.value) {
    getChartData(deviceId.value);
    dateIsChange.value = false;
  }
};
/* endregion === 曲线时间change end */
</script>

<template>
  <AModal
    v-model:open="visible"
    title="设备详情"
    width="100%"
    wrap-class-name="full-modal"
    :body-style="{ backgroundColor: '#F5F7F8', padding: '20px' }"
    destroy-on-close
    @cancel="modalClose"
  >
    <template v-if="model.deviceType === 1">
      <ACard title="传感器类设备详情">
        <AForm
          ref="formRef"
          :disabled="disabled"
          :model="model"
          :rules="rules"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
        >
          <ADescriptions bordered :column="2" size="small">
            <ADescriptionsItem label="设备编码">
              {{ model.deviceNo }}
            </ADescriptionsItem>
            <ADescriptionsItem label="设备名称">
              <AFormItem name="deviceName" class="m-0">
                <AInput v-model:value="model.deviceName" placeholder="请输入设备名称" />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="网关名称">
              {{ model.collectionName }}
            </ADescriptionsItem>
            <ADescriptionsItem label="终端节点名称">
              <AFormItem name="hostNo" class="m-0">
                <ASelect
                  v-model:value="model.hostNo"
                  placeholder="请选择终端名称"
                  :options="hostData"
                  :field-names="{ label: 'hostName', value: 'hostNo', options: 'options' }"
                  clearable
                  @change="nodeNoChange"
                />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="通道">
              <AFormItem name="channel" class="m-0">
                <AInput v-model:value="model.channel" placeholder="请输入通道" />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="上报周期（s）">
              <AFormItem name="period" class="m-0">
                <AInput v-model:value="model.period" placeholder="请输入上报周期" />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="养殖池">
              <AFormItem name="farmId" class="m-0">
                <ASelect
                  v-model:value="model.farmId"
                  placeholder="请选择养殖池"
                  :options="farmData"
                  :field-names="{ label: 'name', value: 'id', options: 'options' }"
                />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="当前值">
              {{ model.field !== '' ? model.field : '暂无' }}
            </ADescriptionsItem>
            <ADescriptionsItem label="下限值">
              <AFormItem name="lowAlarm" class="m-0">
                <AInput v-model:value="model.lowAlarm" placeholder="请输入下限值" />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="上限值">
              <AFormItem name="hiAlarm" class="m-0">
                <AInput v-model:value="model.hiAlarm" placeholder="请输入上限值" />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="单位">
              <AFormItem name="unit" class="m-0">
                {{ model.unit ? model.unit : '暂无' }}
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="命令">
              <AFormItem name="cmd" class="m-0">
                <AInput v-model:value="model.cmd" placeholder="请输入命令" />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="设备类型">
              {{ model.categoryName ? model.categoryName : '暂无' }}
            </ADescriptionsItem>
            <ADescriptionsItem label="大屏是否默认显示">
              <AFormItem name="isShow" class="m-0">
                <ASwitch v-model:checked="model.isShow" />
              </AFormItem>
            </ADescriptionsItem>
          </ADescriptions>
        </AForm>
      </ACard>
      <ACard :title="model.deviceName + '曲线图'" class="mb-20px mt-20px">
        <template #extra>
          <ASpace>
            <AButton :loading="exportExcelLoading" type="primary" @click="exportExcel">导出</AButton>
            <ARangePicker
              v-model:value="chartDataRange"
              :presets="rangePresets"
              @change="dateStateChange"
              @open-change="dateRangeChange"
            />
          </ASpace>
        </template>
        <div ref="domRef" class="h-360px overflow-hidden"></div>
      </ACard>
    </template>
    <template v-if="model.deviceType === 2 || model.deviceType === 3">
      <ACard title="控制器类设备详情">
        <AForm ref="formRef" :model="model" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <ADescriptions bordered :column="2" size="small">
            <ADescriptionsItem label="设备编码">
              {{ model.deviceNo }}
            </ADescriptionsItem>
            <ADescriptionsItem label="设备名称">
              <AFormItem name="deviceName" class="m-0">
                <AInput v-model:value="model.deviceName" placeholder="请输入设备名称" />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="网关名称">
              {{ model.collectionName }}
            </ADescriptionsItem>
            <ADescriptionsItem label="终端节点名称">
              <AFormItem name="hostNo" class="m-0">
                <ASelect
                  v-model:value="model.hostNo"
                  placeholder="请选择终端名称"
                  :options="hostData"
                  :field-names="{ label: 'hostName', value: 'hostNo', options: 'options' }"
                  clearable
                  @change="nodeNoChange"
                />
              </AFormItem>
            </ADescriptionsItem>

            <ADescriptionsItem label="养殖池">
              <AFormItem name="farmId" class="m-0">
                <ASelect
                  v-model:value="model.farmId"
                  placeholder="请选择养殖池"
                  :options="farmData"
                  :field-names="{ label: 'name', value: 'id', options: 'options' }"
                />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="通道">
              <AFormItem name="channel" class="m-0">
                <AInput v-model:value="model.channel" placeholder="请输入通道" />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="备注">
              <AFormItem name="remark" class="m-0">
                <AInput v-model:value="model.remark" placeholder="请输入备注" />
              </AFormItem>
            </ADescriptionsItem>
            <ADescriptionsItem label="状态">
              <span>{{ model.status ? '开' : '关' }}</span>
            </ADescriptionsItem>
            <ADescriptionsItem label="设备类型">
              {{ model.categoryName ? model.categoryName : '暂无' }}
            </ADescriptionsItem>
            <ADescriptionsItem v-if="model.categoryCode === 2002" label="大屏是否显示">
              <AFormItem name="isShow" class="m-0">
                <ASwitch v-model:checked="model.isShow" />
              </AFormItem>
            </ADescriptionsItem>
          </ADescriptions>
        </AForm>
        <div class="mt-10px text-right">
          <AButton type="primary" @click="handleOk(false)">保存基础信息</AButton>
        </div>
      </ACard>

      <ACard title="控制器类设备详情" class="mt-16px">
        <AForm ref="formRef" :model="model" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <ASelect v-model:value="model.controlMode" class="w-200px" placeholder="请选择控制模式">
            <ASelectOption :value="1">手动控制</ASelectOption>
            <ASelectOption :value="2">自动控制</ASelectOption>
          </ASelect>

          <div v-if="model.controlMode === 1 && model.categoryCode !== 2002" class="mt-10px">
            <ASwitch v-model:checked="model.status" checked-children="开" un-checked-children="关" />
          </div>
          <div v-if="model.controlMode === 1 && model.categoryCode === 2002" class="mt-10px">
            <ASpace>
              <AInputNumber v-model:value="minute" class="my-input-number" :min="0" />
              分
              <AInputNumber v-model:value="seconds" class="my-input-number" :min="0" />
              秒
            </ASpace>
          </div>

          <div v-if="model.controlMode === 2" class="mt-10px">
            <ASpace>
              <ASelect v-model:value="model.autoControlMode" class="w-200px" placeholder="请选择自动控制模式">
                <ASelectOption :value="1">时间表自动控制</ASelectOption>
                <ASelectOption :value="2">上下限自动控制</ASelectOption>
              </ASelect>
              <ACheckbox v-model:checked="model.isAllowSameTime" class="ml-20px">允许时间表和上下限同时控制</ACheckbox>
            </ASpace>
          </div>

          <div v-if="model.controlMode === 2 && model.autoControlMode === 2">
            <ADescriptions class="mt-10px" bordered :column="2" size="small">
              <ADescriptionsItem label="终端节点名称">
                <AFormItem name="hostNo1" class="m-0">
                  <ASelect
                    v-model:value="model.hostNo1"
                    placeholder="请选择终端节点名称"
                    :options="hostData"
                    :field-names="{ label: 'hostName', value: 'hostNo', options: 'options' }"
                    clearable
                    @change="changeCgHost"
                  />
                </AFormItem>
              </ADescriptionsItem>
              <ADescriptionsItem label="传感器名称">
                <AFormItem name="sensorDeviceName" class="m-0">
                  <ASelect
                    v-model:value="model.sensorDeviceName"
                    placeholder="请选择传感器名称"
                    :options="deviceIdList"
                    :field-names="{ label: 'label', value: 'value', options: 'options' }"
                    clearable
                    @change="changeDevice"
                  />
                </AFormItem>
              </ADescriptionsItem>
              <ADescriptionsItem label="触发的下限值">
                <AFormItem name="lowValueTrigger" class="m-0">
                  <AInput v-model:value="model.lowValueTrigger" placeholder="请输入触发的下限值" />
                </AFormItem>
              </ADescriptionsItem>
              <ADescriptionsItem label="触发的上限值">
                <AFormItem name="highValueTrigger" class="m-0">
                  <AInput v-model:value="model.highValueTrigger" placeholder="请输入触发的上限值" />
                </AFormItem>
              </ADescriptionsItem>
              <ADescriptionsItem label="触发下限值继电器开关">
                <AFormItem name="lowValueTriggerSwitch" class="m-0">
                  <ASwitch
                    v-model:checked="model.lowValueTriggerSwitch"
                    checked-children="开"
                    un-checked-children="关"
                  />
                </AFormItem>
              </ADescriptionsItem>
              <ADescriptionsItem label="触发上限值继电器开关">
                <AFormItem name="lowValueTriggerSwitch" class="m-0">
                  <ASwitch
                    v-model:checked="model.highValueTriggerSwitch"
                    checked-children="开"
                    un-checked-children="关"
                  />
                </AFormItem>
              </ADescriptionsItem>
              <ADescriptionsItem label="触发下限值是否启用">
                <AFormItem name="lowValueTriggerEnable" class="m-0">
                  <ASwitch
                    v-model:checked="model.lowValueTriggerEnable"
                    checked-children="开"
                    un-checked-children="关"
                  />
                </AFormItem>
              </ADescriptionsItem>
              <ADescriptionsItem label="触发上限值是否启用">
                <AFormItem name="highValueTriggerEnable" class="m-0">
                  <ASwitch
                    v-model:checked="model.highValueTriggerEnable"
                    checked-children="开"
                    un-checked-children="关"
                  />
                </AFormItem>
              </ADescriptionsItem>
            </ADescriptions>
          </div>
          <div class="mt-10px">
            <table
              v-if="model.controlMode === 2 && model.autoControlMode === 1"
              class="table-striped table-bordered table"
              align="center"
              valign="center"
            >
              <tr>
                <td class="column">定时开关1</td>
                <td class="value">
                  <ElTimeSelect
                    v-model="model.timer1Start"
                    style="width: 200px"
                    placeholder="起始时间"
                    format="HH:mm"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer1End"
                  ></ElTimeSelect>
                  -
                  <ElTimeSelect
                    v-model="model.timer1End"
                    style="width: 200px"
                    placeholder="结束时间"
                    format="HH:mm"
                    :disabled="model.timer1Start === ''"
                    :start="model.timer1Start"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer2Start"
                    :min-time="model.timer1Start"
                  ></ElTimeSelect>
                </td>
                <td class="column">是否启用开关1</td>
                <td class="value">
                  <ASwitch
                    v-model:checked="model.timer1Enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></ASwitch>
                </td>
              </tr>
              <tr>
                <td class="column">定时开关2</td>
                <td class="value">
                  <ElTimeSelect
                    ref="timer1StartRef"
                    v-model="model.timer2Start"
                    style="width: 200px"
                    placeholder="起始时间"
                    format="HH:mm"
                    :disabled="model.timer1Start === '' || model.timer1End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer2End"
                    :min-time="model.timer1End"
                  ></ElTimeSelect>
                  -
                  <ElTimeSelect
                    v-model="model.timer2End"
                    placeholder="结束时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer2Start === '' || model.timer1Start === '' || model.timer1End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer3Start"
                    :min-time="model.timer2Start"
                  ></ElTimeSelect>
                </td>
                <td class="column">是否启用开关2</td>
                <td class="value">
                  <ASwitch
                    v-model:checked="model.timer2Enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></ASwitch>
                </td>
              </tr>
              <tr>
                <td class="column">定时开关3</td>
                <td class="value">
                  <ElTimeSelect
                    v-model="model.timer3Start"
                    placeholder="起始时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer2Start === '' || model.timer2End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer3End"
                    :min-time="model.timer2End"
                  ></ElTimeSelect>
                  -
                  <ElTimeSelect
                    v-model="model.timer3End"
                    placeholder="结束时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer3Start === '' || model.timer2Start === '' || model.timer2End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer4Start"
                    :min-time="model.timer3Start"
                  ></ElTimeSelect>
                </td>
                <td class="column">是否启用开关3</td>
                <td class="value">
                  <ASwitch
                    v-model:checked="model.timer3Enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></ASwitch>
                </td>
              </tr>
              <tr>
                <td class="column">定时开关4</td>
                <td class="value">
                  <ElTimeSelect
                    v-model="model.timer4Start"
                    placeholder="起始时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer3Start === '' || model.timer3End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer4End"
                    :min-time="model.timer3End"
                  ></ElTimeSelect>
                  -
                  <ElTimeSelect
                    v-model="model.timer4End"
                    placeholder="结束时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer4Start === '' || model.timer3Start === '' || model.timer3End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer5Start"
                    :min-time="model.timer4Start"
                  ></ElTimeSelect>
                </td>
                <td class="column">是否启用开关4</td>
                <td class="value">
                  <ASwitch
                    v-model:checked="model.timer4Enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></ASwitch>
                </td>
              </tr>
              <tr>
                <td class="column">定时开关5</td>
                <td class="value">
                  <ElTimeSelect
                    v-model="model.timer5Start"
                    placeholder="起始时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer4Start === '' || model.timer4End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer5End"
                    :min-time="model.timer4End"
                  ></ElTimeSelect>
                  -
                  <ElTimeSelect
                    v-model="model.timer5End"
                    placeholder="结束时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer5Start === '' || model.timer4Start === '' || model.timer4End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer6Start"
                    :min-time="model.timer5Start"
                  ></ElTimeSelect>
                </td>
                <td class="column">是否启用开关5</td>
                <td class="value">
                  <ASwitch
                    v-model:checked="model.timer5Enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></ASwitch>
                </td>
              </tr>
              <tr>
                <td class="column">定时开关6</td>
                <td class="value">
                  <ElTimeSelect
                    v-model="model.timer6Start"
                    placeholder="起始时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer5Start === '' || model.timer5End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer6End"
                    :min-time="model.timer5End"
                  ></ElTimeSelect>
                  -
                  <ElTimeSelect
                    v-model="model.timer6End"
                    placeholder="结束时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer6Start === '' || model.timer5Start === '' || model.timer5End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer7Start"
                    :min-time="model.timer6Start"
                  ></ElTimeSelect>
                </td>
                <td class="column">是否启用开关6</td>
                <td class="value">
                  <ASwitch
                    v-model:checked="model.timer6Enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></ASwitch>
                </td>
              </tr>
              <tr>
                <td class="column">定时开关7</td>
                <td class="value">
                  <ElTimeSelect
                    v-model="model.timer7Start"
                    placeholder="起始时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer6Start === '' || model.timer6End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer7End"
                    :min-time="model.timer6End"
                  ></ElTimeSelect>
                  -
                  <ElTimeSelect
                    v-model="model.timer7End"
                    placeholder="结束时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer7Start === '' || model.timer6Start === '' || model.timer6End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer8Start"
                    :min-time="model.timer7Start"
                  ></ElTimeSelect>
                </td>
                <td class="column">是否启用开关7</td>
                <td class="value">
                  <ASwitch
                    v-model:checked="model.timer7Enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></ASwitch>
                </td>
              </tr>
              <tr>
                <td class="column">定时开关8</td>
                <td class="value">
                  <ElTimeSelect
                    v-model="model.timer8Start"
                    placeholder="起始时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer7Start === '' || model.timer7End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :max-time="model.timer8End"
                    :min-time="model.timer7End"
                  ></ElTimeSelect>
                  -
                  <ElTimeSelect
                    v-model="model.timer8End"
                    placeholder="结束时间"
                    style="width: 200px"
                    format="HH:mm"
                    :disabled="model.timer8Start === '' || model.timer7Start === '' || model.timer7End === ''"
                    start="00:00"
                    step="00:05"
                    end="23:59"
                    :min-time="model.timer8Start"
                  ></ElTimeSelect>
                </td>
                <td class="column">是否启用开关8</td>
                <td class="value">
                  <ASwitch
                    v-model:checked="model.timer8Enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></ASwitch>
                </td>
              </tr>
            </table>
          </div>
        </AForm>
        <div v-if="model.controlMode === 2" class="mt-10px text-right">
          <AButton type="primary" @click="handleKZOk">保存控制器信息</AButton>
        </div>
        <div v-else-if="model.controlMode === 1 && model.categoryCode !== 2002" class="mt-10px text-right">
          <AButton type="primary" @click="saveSwitchDevice(1)">保存</AButton>
        </div>
        <div v-else-if="model.controlMode === 1 && model.categoryCode === 2002" class="mt-10px text-right">
          <AButton type="primary" @click="saveSwitchDevice(2)">开始投料</AButton>
        </div>
      </ACard>
    </template>

    <template #footer>
      <ASpace v-if="!disabled" :size="16" class="footer">
        <AButton @click="modalClose">取消</AButton>
        <AButton v-if="model.deviceType === 1" type="primary" @click="handleOk">确认</AButton>
      </ASpace>
    </template>
  </AModal>
</template>

<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh);
  }

  .ant-modal-body {
    flex: 1;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px 20px;
    border-top: 1px solid #e9e9e9;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: transparent;
  display: table;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.table td {
  /*text-align: center;*/
  vertical-align: middle;
  font-size: 14px;
  font-family: 'Arial Normal', 'Arial';
  color: #333333;
  padding: 8px 12px;
}

.table-bordered {
  border: 1px solid #ddd;
}

.column {
  width: 90px;
  height: 60px;
  border: 1px solid #333;
  background: #f1f1f1;
}

.pink-back {
  background-color: #f3e0e0;
}

.value {
  width: 240px;
  height: 60px;
  border: 1px solid #333;
}

.data-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  color: #888;
  font-size: 14px;
}
</style>
